<template>
	<div class="dPublish">
		<div class="release">
			<div class="wCen">
				<div class="formBox">
					<el-form ref="form" :model="form" :rules="formValidate" label-position="top">
						<el-row :gutter="52">
							<el-col :sm="12" :xs="24">
								<el-form-item :label="$t('demand-publish-productName')" prop="title">
									<el-input v-model="form.title" :maxlength="50" clearable
										:placeholder="$t('demand-placeholder-publish-buy-productName')" />
									<p class="my-tip">{{ $t("max-length") }} <em>50</em> {{ $t("chars") }}。</p>
								</el-form-item>
							</el-col>
							<el-col :sm="12" :xs="24">
								<el-form-item :label="$t('demand-publish-intro-product')" prop="descr">
									<el-input v-model="form.descr" :maxlength="50" clearable
										:placeholder="$t('demand-placeholder-publish-buy-intro-product')" />
									<p class="my-tip">{{ $t("max-length") }} <em>50</em> {{ $t("chars") }}。</p>
								</el-form-item>
							</el-col>
							<el-col :sm="12" :xs="24">
								<el-form-item :label="$t('demand-publish-production')" prop="demandNum">
									<el-input v-model="form.demandNum" maxlength="50" clearable
										:placeholder="$t('demand-placeholder-publish-buy-production')" />
									<p class="my-tip">{{ $t("demand-publish-production") }}</p>
								</el-form-item>
							</el-col>
							<el-col :sm="12" :xs="24">
								<el-form-item :label="$t('demand-publish-regionalReq')" prop="region">
									<el-input v-model="form.region" :maxlength="50" clearable
										:placeholder="$t('demand-placeholder-publish-buy-regionalReq')" />
									<p class="my-tip">{{ $t("demand-publish-regionalReq") }}</p>
								</el-form-item>
							</el-col>
							<el-col :sm="12" :xs="24">
								<el-form-item :label="$t('demand-publish-brandReq')" prop="brandName">
									<el-input v-model="form.brandName" :maxlength="50" clearable
										:placeholder="$t('demand-placeholder-publish-buy-brandReq')" />
								</el-form-item>
							</el-col>
							<el-col :sm="12" :xs="24">
								<el-form-item :label="$t('demand-publish-demandTime')" prop="demandTime">
									<el-date-picker :placeholder="$t('demand-placeholder-publish-buy-demandTime')"
										type="date" clearable v-model="form.demandTime" style="width: 100%"
										value-format="yyyy-MM-dd"></el-date-picker>
								</el-form-item>
							</el-col>
								<el-col :sm="24" :xs="24">
									<el-form-item :label="$t('demand-publish-person-label')" prop="label">
										<el-select v-model="form.label" clearable
											:placeholder="$t('demand-placeholder-publish-buy-person-label')"
											style="width: 100%">
											<el-option :label="localeCn?item.label:item.labelEn" :value="item.value"
												v-for="(item, idx) in dict.type.supply_demand_label"
												:key="idx"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							<el-col :sm="12" :xs="24">
								<el-form-item :label="$t('demand-publish-supply-productPhoto')" prop="image">
									<common-image-upload v-model="form.image" :file-size="2" :limit="1" clearable
										:placeholder="$t('demand-placeholder-publish-supply-productPhoto')"></common-image-upload>
									<p class="my-tip">{{ $t("mem-size-suggest") }}<em>200px*200px</em></p>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div class="boxFooter">
						<el-button type="success" @click="handleSubmit"
							:loading="loading">{{ $t("demand-publish-btn") }}</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		publish,
		getEditDetail,
		edit
	} from "@/api/demand";
	export default {
		layout: "front",
		dicts: ["supply_demand_label"],
		computed: {
			offset() {
				return this.isMobile ? 0 : 2;
			},
			id() {
				return this.$route.query.id || "";
			},
			isEdit() {
				return this.id ? true : false;
			},
		},
		data() {
			return {
				item: null,
				loading: false,
				form: {
					type: 1,
					title: "",
					descr: "",
					demandNum: "",
					region: "",
					brandName: "",
					demandTime: "",
					label: "",
					image: "",
					id: ""
				},
				formValidate: {
					title: [{
						required: true,
						message: this.$t("demand-placeholder-publish-buy-productName"),
						trigger: "blur",
					}, ],
					descr: [{
						required: true,
						message: this.$t("demand-placeholder-publish-buy-intro-product"),
						trigger: "blur",
					}, ],
					demandNum: [{
						required: true,
						message: this.$t("demand-placeholder-publish-buy-production"),
						trigger: "change",
					}, ],
					region: [{
						required: true,
						message: this.$t("demand-placeholder-publish-buy-regionalReq"),
						trigger: "blur",
					}, ],
					brandName: [{
						required: true,
						message: this.$t("demand-placeholder-publish-buy-production"),
						trigger: "blur",
					}, ],
					demandTime: [{
						required: true,
						message: this.$t("demand-placeholder-publish-buy-demandTime"),
						trigger: "blur",
					}, ],
					label: [{
						required: true,
						message: this.$t("demand-placeholder-publish-buy-person-label"),
						trigger: "change",
					}, ],
					image: [{
						required: true,
						message: this.$t("demand-placeholder-publish-supply-productPhoto"),
						trigger: "change",
					}, ],
				},
			};
		},
		mounted() {
			if (this.isEdit) {
				this.getDetailFun();
			}
		},
		methods: {
			// 获取详情数据
			getDetailFun() {
				this.invoke(getEditDetail, this.id).then((res) => {
					if (res && res.code == 200) {
						this.item = res.data;
						this.$nextTick(() => {
							this.initData();
						});
					}
				});
			},
			initData() {
				this.form.id = this.id;
				this.form.title = this.item.title;
				this.form.descr = this.item.descr;
				this.form.demandNum = this.item.demandNum;
				this.form.region = this.item.region;
				this.form.brandName = this.item.brandName;
				this.form.demandTime = this.item.demandTime;
				this.form.label = this.item.label;
				this.form.image = this.item.image;
			},
			// 地域要求
			changeCity(data) {
				this.form.region = data.join(",");
			},
			//发布与修改
			handleSubmit() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						// 编辑
						if (this.isEdit) {
							this.invoke(edit, this.form).then((res) => {
								if (res && res.code == 200) {
									this.$message.success(this.$t("demand-publish-edit-success"));
									this.back()
								}
							});
							// 新增
						} else {
							this.invoke(publish, this.form).then((res) => {
								if (res && res.code == 200) {
									this.$message.success(this.$t("demand-publish-success"));
									this.back()
								}
							});
						}
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped src="@/assets/styles/demand-publish.scss"></style>